import { Button } from "antd"
import { useEffect, useState } from "react"
const TroggleTheme = ()=> {
  const [theme,setTheme] = useState(()=>{
    const baseTheme = localStorage.getItem('theme')
    return  baseTheme ? baseTheme : 'light'
  })

  useEffect(()=>{
    document.body.setAttribute('data-theme',theme)
    localStorage.setItem('theme',theme)
  },[theme])


  const changeTheme = ()=>{
    setTheme(prev=>prev === 'light' ? 'dark' : 'light')
  }

  return (
    <div>
      <Button
        aria-label="切换主题"
        onClick={changeTheme}
      >
        {theme === 'light'? '白天' : '黑夜'}

      </Button>
    </div>
  )
}


export default TroggleTheme
